<template>
  <div class="container-xl" v-if="getuser">
    <div class="row ">

      <div class="col ">

        <div class="my-home-div user position-relative" :style="{
          display: 'flex',
          flexWrap: 'wrap'
        }">
          <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/GIF/bee.gif" alt="">
          <div class="col" :style="{
            display: 'flex',
            flexWrap: 'wrap'
          }">
            <div class="username">
              <el-avatar :size="62" :src="getuser.headportrait" />
            </div>
            <div class="username">
              <div>{{ getuser.name }}</div>
            </div>
          </div>
          <div class="col text-right" v-if="getuser?.ID && store.state.user?.ID === getuser?.ID">
            <el-button @click="$router.push({
              path: '/mydata/question'
            })" size="small">我的题目</el-button>
            <el-button size="small" @click="handleCommand('d')">个人设置</el-button>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-8 col-sm-12">
        <questionnumVue :teamid="teamid" :teamdata="teamdata" :getuser="getuser"></questionnumVue>
      </div>
      <div class="col-md-4 col-sm-12 ">
        <div class="my-home-div">
          <div class="my-home-div-line row">
            <div>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-icon_personalinformation" />
              </svg>
              个人信息
            </div>
          </div>
          <div class="m-p-3  m-0">
            <div class="user_date">
              <div>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_Clock" />
                </svg>
                最近登录时间：{{ TimeYH(getuser.lasttime) }}
              </div>
            </div>
            <div class="user_date">
              <div>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-a-icon_CalendarClock" />
                </svg>
                最近答题时间：{{ teamdata.createdAt ? TimeYH(teamdata.createdAt) : '无' }}
              </div>
            </div>
          </div>
        </div>

        <integralnumVue :getuser="getuser"></integralnumVue>

        <div class="my-home-div">
          <div class="my-home-div-line row">
            <div>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-icon_achievement" />
              </svg>
              成就
              <el-tooltip effect="dark" content="敬请期待" placement="top">
                <span size="small" class="circle">?
                </span>
              </el-tooltip>
            </div>
          </div>
          <div :style="{ padding: '12px', backgroundColor: '#f5f5f5' }">
            成就党的福音，敬请期待！ε≡٩(๑>₃&lt;)۶ </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {
  computed,
  ComputedRef,
  inject,
  onMounted,
  ref,
  watch,
} from "vue";


import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { Storekey } from "../../../interface";
import { asyncgetuser, asyncranking } from "../../../api";
import { ElMessage } from "element-plus";
import { TimeYH } from "../../../util/time";
import questionnumVue from "./questionnum.vue";
import integralnumVue from "./integralnum.vue";

const headnav = inject<ComputedRef<{
  handleCommand: (v: string) => void
}>
>("headnav");

function handleCommand(v: string) {
  headnav?.value.handleCommand('d')
}
const store = useStore(Storekey);

const router = useRouter();

const route = useRoute();

const ID = computed(() => {
  return Number(route.query.userid)
})


const getuser = computed(() => {
  if (ID.value) {
    return user.value
  }
  return store.state.user;
});



const user = ref<Studycodemodel.Iuser>()


const runking = ref()

const getteam = computed(() => {
  if (ID.value) {
    const team = user.value?.team || []
    const teamuser = user.value?.teamuser || []
    return team.concat(...teamuser.map(e => {
      return {
        ID: e.teamid
      }
    }))
  }
  return store.state.team?.rows || []
})


const teamid = computed(() => {
  if (!ID.value) {
    return getteam.value[0]?.ID
  }
  if (store.state.user?.ID === ID.value) {
    return getteam.value[0]?.ID
  }
  const team = store.state.team?.rows.map(e => e.ID) || []
  const _getteam = getteam.value.map(e => e.ID) || []
  const find = _getteam.find(f => team.includes(f))
  if (find) {
    return find
  } else {
    if (store.state.science) {
      if (user.value?.team) {
        const c = team.find(t => user.value.team?.map(c => c.ID).includes(t))
        console.log(c)
        console.log(team)
        console.log(getteam.value)
        return c
      }
    }
    return false
  }
})

const teamdata = ref<{ ID?: number, name?: string, ACcount?: number, df?: number, headportrait?: string, createdAt?: Date }>({})







watch(() => ID.value, () => {
  start();
});

async function teamstart() {
  if (teamid.value) {
    try {
      const t = await asyncranking({ userid: getuser.value?.ID, teamid: teamid.value, formdate: Date.now() - (1000 * 60 * 60 * 24 * 365), todate: new Date() })
      teamdata.value = t.ACrank[0] || {}
    } catch (e) {
      // ElMessage.error('没有查询')
    }

  }
}






async function start() {
  if (ID.value) {
    user.value = await asyncgetuser({ ID: ID.value })
  }
  teamstart()
}


onMounted(() => {
  start();
});

</script>

<style scoped>
.user_date {
  display: flex;
  flex-wrap: wrap;

}

.user_date div {
  min-width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 100%;
}

.user {
  height: 112px;
  margin-top: 32px;
  margin-bottom: 24px;
  padding: 24px;
  z-index: 2;
  background-image: url(https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/GIF/CATBC.gif);
  background-size: contain;
  background-repeat: no-repeat;
}

.user img {
  position: absolute;
  top: 15px;
  left: 20%;
}

.username {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  margin-right: 12px;
}

.circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 16px;
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  width: 16px;
  font-size: 12px;
  font-weight: 400;
  transform: translateY(-1px);
}
</style>
